<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>合伙人月业绩达成</h4>
		</view>


		<up-datetime-picker hasInput :show="show" v-model="selectedMonth" mode="year-month" closeOnClickOverlay
			@click="show = true" @cancel="show = false" @confirm="handleConfirm" @close="show = false">

			<template #trigger>
				<up-input v-model="inputMonth" placeholder="选择月份" readonly prefixIcon="calendar"
					prefixIconStyle="font-size: 22px;color: #909399"></up-input>
				<!-- <u-icon name="calendar" color="#666" size="28rpx" class="picker-icon" /> -->
			</template>
		</up-datetime-picker>




		<view class="chartsMain">
			<view class="charts-box">
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" ref="chartRef" />
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		watch
	} from 'vue';
	import {
		phoneStaGetPartnerMonthAche
	} from '../../../utils/data';

import {onShow} from '@dcloudio/uni-app'


	//========================月份选择器========================//

	const show = ref(false);

	//月份选择器里的时间戳
	let selectedMonth = ref(new Date().getTime())
	//显示在 输入框的 yyyy-mm时间
	let inputMonth = ref()

	//让输入框为当前月份
	const date = new Date();
	const year = date.getFullYear();
	const month = (date.getMonth() + 1).toString().padStart(2, '0');
	inputMonth.value = `${year}-${month}`



	//月份选择点击确认按钮
	let handleConfirm = (value) => {
		inputMonth.value = timestampToMonth(value.value)
		show.value = false
		console.log(inputMonth.value)

	}

	//将 时间戳 转化成 yyyy-mm格式
	let timestampToMonth = (timestamp) => {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		return `${year}-${month}`;
	}


	// =============================获取图表实例============================//
	const chartRef = ref(null)

	let chartData = ref({
		categories: [],
		series: []
	});

	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		fontSize: 9,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
			show: false,
			position: "bottom",
			float: "center",
			padding: 5,
			margin: 5,
			backgroundColor: "rgba(0,0,0,0)",
			borderColor: "rgba(0,0,0,0)",
			borderWidth: 0,
			fontSize: 13,
			fontColor: "#666666",
			lineHeight: 11,
			hiddenColor: "#CECECE",
			itemGap: 10
		},
		xAxis: {
			disableGrid: true,
			disabled: false,
			axisLine: true,
			axisLineColor: "#CCCCCC",
			calibration: false,
			fontColor: "#666666",
			fontSize: 9,
			lineHeight: 20,
			marginTop: 10,
			rotateLabel: true,
			rotateAngle: 45,
			itemCount: 5,
			boundaryGap: "center",
			splitNumber: 5,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			gridEval: 1,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			title: "",
			titleFontSize: 13,
			titleOffsetY: 0,
			titleOffsetX: 0,
			titleFontColor: "#666666",
			format: ""
		},
		yAxis: {
			data: [{
				min: 0
			}],
			disabled: true,
			disableGrid: true,
			splitNumber: 5,
			gridType: "solid",
			dashLength: 8,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: false
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				seriesGap: 2,
				categoryGap: 3,
				barBorderCircle: false,
				linearType: "none",
				linearOpacity: 1,
				colorStop: 0,
				meterBorder: 1,
				meterFillColor: "#FFFFFF",
				labelPosition: "outside"
			},
			tooltip: {
				showBox: true,
				showArrow: true,
				showCategory: false,
				borderWidth: 0,
				borderRadius: 0,
				borderColor: "#000000",
				borderOpacity: 0.7,
				bgColor: "#000000",
				bgOpacity: 0.7,
				gridType: "solid",
				dashLength: 4,
				gridColor: "#CCCCCC",
				boxPadding: 3,
				fontSize: 13,
				lineHeight: 20,
				fontColor: "#FFFFFF",
				legendShow: true,
				legendShape: "auto",
				splitLine: true,
				horizentalLine: false,
				xAxisLabel: false,
				yAxisLabel: false,
				labelBgColor: "#FFFFFF",
				labelBgOpacity: 0.7,
				labelFontColor: "#666666"
			},
			markLine: {
				type: "solid",
				dashLength: 4,
				data: []
			}
		}
	})


	let xAxisArray = ref([])
	let nowAcheArray = ref([])

	let getServerData = () => {
		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId

		phoneStaGetPartnerMonthAche('/phoneSta/getPartnerMonthAche', {
			businessId: businessId,
			month: inputMonth.value + '-01',
		}).then((res) => {
			if (res.code == 200) {
				xAxisArray.value = [];
				nowAcheArray.value = [];
				for (var i = 0; i < res.data.length; i++) {
					xAxisArray.value.push(res.data[i].name)
					nowAcheArray.value.push(res.data[i].nowAche)
				}
				let result = {
					categories: xAxisArray.value,
					series: [{
							name: "月业绩",
							data: nowAcheArray.value
						},
					
					]
				};
				chartData.value = JSON.parse(JSON.stringify(result));
			}
		})
	
	}

	// onMounted(() => {
	// 	getServerData()
	// })
	onShow(()=>{
		selectedMonth.value = new Date().getTime()
		
		//让输入框为当前月份
		const date = new Date();
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		inputMonth.value = `${year}-${month}`
		
		getServerData()
	})
	
	watch(inputMonth,(newCount,oldCount)=>{
		getServerData()
	})
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 688rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}



		.uniDataSelect {
			margin-bottom: 14rpx;
		}


		.chartsMain {
			width: 100%;
			height: 366rpx;

			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

		}
	}

	.orangeColor {
		color: #FF8F38;
	}
</style>